<template>
	<view class="step-item">
		<!-- 步骤头部 -->
		<view class="step-header">
			<view class="step-icon">🔍</view>
			<view class="step-title-main">审核状态</view>
			<view class="step-description">活动正在审核中，请耐心等待审核结果</view>
		</view>

		<view class="audit-status">
			<view class="status-card" :class="getStatusClass()">
				<view class="status-icon">{{ getStatusIcon() }}</view>
				<view class="status-text">{{ getStatusText() }}</view>
				<view class="status-desc">{{ getStatusDesc() }}</view>
			</view>
		</view>

		<!-- 审核失败时显示原因 -->
		<view v-if="activityState === -1" class="failure-reason">
			<view class="reason-title">审核失败原因</view>
			<view class="reason-content">
				{{ activityData.audit_reason || '暂无具体原因说明' }}
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="cancel-btn" @click="prevStep">
				<text>上一步</text>
			</view>
			<view v-if="activityState === 2" class="save-btn" @click="goToComplete">
				<text>完成</text>
			</view>
		</view>
	</view>
</template>

<script>
import { activityDetail } from '@/api/launchevent'

export default {
	props: {
		activityId: {
			type: [Number, String],
			default: null
		},
		activityState: Number,
		activityData: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			formData: {},
			loading: true
		};
	},
	watch: {
		activityData: {
			handler(newVal) {
				this.formData = {
					...this.formData,
					...newVal
				}
				this.activityState = newVal.state
			},
			deep: true,
			immediate: true
		},
	},
	methods: {
		getStatusClass() {
			switch (this.activityState) {
				case 1: return 'status-pending';
				case 2: return 'status-success';
				case -1: return 'status-failed';
				default: return 'status-unknown';
			}
		},
		
		getStatusIcon() {
			switch (this.activityState) {
				case 1: return '⏳';
				case 2: return '✅';
				case -1: return '❌';
				default: return '❓';
			}
		},
		
		getStatusText() {
			switch (this.activityState) {
				case 1: return '审核中';
				case 2: return '审核通过';
				case -1: return '审核失败';
				default: return '未知状态';
			}
		},
		
		getStatusDesc() {
			switch (this.activityState) {
				case 1: return '您的活动正在审核中，预计24小时内完成';
				case 2: return '恭喜！您的活动已通过审核，可以正常发布';
				case -1: return '很抱歉，您的活动未通过审核，请返回上一步修改后重新提交';
				default: return '请联系客服了解详情';
			}
		},
		
		goToComplete() {
			// 跳转到完成步骤
			this.$emit('jump', 3);
		},
		
		prevStep() {
			this.$emit('prev');
		}
	}
};
</script>

<style lang="scss" scoped>
.step-item {
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
}

/* 步骤头部样式 */
.step-header {
	text-align: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #d5d5d5;
}

.step-icon {
	font-size: 48rpx;
	margin-bottom: 12rpx;
}

.step-title-main {
	font-size: 32rpx;
	font-weight: 500;
	color: #000000;
	margin-bottom: 8rpx;
}

.step-description {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

/* 审核状态卡片 */
.audit-status {
	margin-bottom: 30rpx;
}

.status-card {
	text-align: center;
	padding: 40rpx 20rpx;
	border-radius: 12rpx;
	margin-bottom: 20rpx;

	.status-icon {
		font-size: 80rpx;
		margin-bottom: 16rpx;
	}

	.status-text {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 12rpx;
	}

	.status-desc {
		font-size: 24rpx;
		line-height: 1.4;
		opacity: 0.8;
	}
}

.status-pending {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	border: 1rpx solid #ffeaa7;

	.status-text {
		color: #856404;
	}

	.status-desc {
		color: #856404;
	}
}

.status-success {
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border: 1rpx solid #c3e6cb;

	.status-text {
		color: #155724;
	}

	.status-desc {
		color: #155724;
	}
}

.status-failed {
	background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
	border: 1rpx solid #f5c6cb;

	.status-text {
		color: #721c24;
	}

	.status-desc {
		color: #721c24;
	}
}

.status-unknown {
	background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
	border: 1rpx solid #d6d8db;

	.status-text {
		color: #383d41;
	}

	.status-desc {
		color: #383d41;
	}
}

/* 失败原因 */
.failure-reason {
	background: #fff5f5;
	border: 1rpx solid #fed7d7;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;

	.reason-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #c53030;
		margin-bottom: 12rpx;
	}

	.reason-content {
		font-size: 24rpx;
		color: #742a2a;
		line-height: 1.5;
	}
}

/* 底部按钮样式 */
.bottom-buttons {
	display: flex;
	justify-content: center;
	gap: 24rpx;
	padding: 40rpx 20rpx;

	.cancel-btn {
		width: 331rpx;
		height: 90rpx;
		background: #fcfffe;
		border-radius: 44rpx;
		border: 2rpx solid #d5d5d5;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 32rpx;
			color: #333;
		}
	}

	.save-btn {
		width: 331rpx;
		height: 90rpx;
		background: #0dc160;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 32rpx;
			color: #ffffff;
		}
	}
}
</style>

